<template>
  <div class="Loginback">
    <div class="Loginbackimg"></div>
    <div class="loginlocat">
      <div class="loginbox">
        <h1 class="title">智慧党建云平台</h1>
        <h1 class="title1">登录</h1>
        <div class="inputbox">
          <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            class="demo-ruleForm"
          >
            <el-form-item prop="username">
              <el-input
                class="inputtext"
                v-model="ruleForm.username"
                placeholder="请输入账号"
                type="text"
                autocomplete="off"
              />
            </el-form-item>
            <el-form-item prop="pwd">
              <el-input
                class="inputtext"
                v-model="ruleForm.pwd"
                placeholder="请输入密码"
                type="password"
                autocomplete="off"
              />
            </el-form-item>

            <el-form-item prop="Captchatext1">
              <div class="Captchabox">
                <el-input
                  class="inputCaptchatext"
                  v-model="ruleForm.Captchatext1"
                  placeholder="请输入验证码"
                  type="test"
                  autocomplete="off"
                />
                <div class="supplement" @click="changeCaptcha()">
                  <div v-dompurify-html="ruleForm.Captcha"></div>
                </div>
              </div>
              <!-- <el-input v-model="ruleForm.Captcha" placeholder="请输入验证码" type="text" autocomplete="off" /> -->
            </el-form-item>
            <div class="btnbox">
              <el-button type="primary" @click="loginFn()">登录</el-button>
              <el-button type="primary" @click="register()">注册</el-button>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { loginApi, getCaptcha } from "@/request/user";
import { userStore } from "@/store/modules/user";

const state = reactive({
  ruleForm: {
    username: "admin",
    pwd: "123456",
    Captcha: "",
    Captchatext1: "",
    Captchatext2: "",
  },
});
// let captcha = ref(await getCaptcha())
let { ruleForm } = toRefs(state);
// 获取el-form组件对象
let ruleFormRef = ref();
// 获取项目路由对象
let router = useRouter();
// 获取项目pina对象
const user = userStore();
// 点击 修改验证码
const changeCaptcha = async () => {
  await getCaptcha().then((res) => {
    let {
      data1: { data, text },
    } = res;
    state.ruleForm.Captcha = data;
    state.ruleForm.Captchatext2 = text;
    state.ruleForm.Captchatext1 = text;
    // console.log("验证码",text);
    
  });
};

onMounted(() => {
  changeCaptcha();
});
const validatePwd = (
  rule: unknown,
  value: string | undefined,
  cb: (msg?: string) => void
) => {
  if (!value) {
    cb("密码不能为空");
  } else {
    cb();
  }
};
const validateCaptchatext1 = (
  rule: unknown,
  value: string | undefined,
  cb: (msg?: string) => void
) => {
  if (!value) {
    cb("验证码不能为空");
  } else if (value != state.ruleForm.Captchatext2) {
    cb("验证码错误!");
  } else {
    cb();
  }
};

// 校验规则
const rules = reactive({
  username: [{ required: true, message: "账号不能为空！", trigger: "blur" }],
  pwd: [{ validator: validatePwd, trigger: "blur" }],
  Captchatext1: [{ validator: validateCaptchatext1, trigger: "blur" }],
});
// 点击登录按钮触发
const loginFn = async () => {
  console.log(ruleForm.value.username);
  await ruleFormRef.value
    .validate()
    .then(() => {
      // console.log('校验通过');
      loginApi({
        Account: ruleForm.value.username,
        password: ruleForm.value.pwd,
      }).then((res) => {
        let { code, message } = res;
        if (code === 200) {
          let {
            result: { token, userinfo },
          } = res;
          localStorage.setItem("token", token);
          user.settoken(token);
          // getrouteslist()
          router.push("/homeview");
        } else {
          ElMessage({
            message: "登录失败" + "," + message,
            type: "error",
          });
        }
      });
      // .catch(e => {
      //     ElMessage({
      //         message: '登录失败',
      //         type: 'error',
      //     })

      // })
    })
    .catch(() => {
      console.log("校验不同通过");
    });
};

const register = () => {
  router.push("/register");
};
</script>

<style lang="scss" scoped>
.Loginback {
  height: 100vh;
  width: 100%;
  position: fixed;
  // background-repeat: no-repeat;
  // background-image: url('@/assets/img/back.jpg'); //url()括号里面是图片路径，图片即为背景图片
  // background-size: cover;
  // background-attachment: fixed;
  display: flex;
  justify-content: center;
  overflow: hidden;

  // filter: blur(15px);
  .Loginbackimg {
    height: 100vh;
    width: 100%;
    position: fixed;
    background-repeat: no-repeat;
    background-image: url("@/assets/img/back.jpg"); //url()括号里面是图片路径，图片即为背景图片
    background-size: cover;
    background-attachment: fixed;
    -webkit-filter: blur(5px);
    filter: blur(2px);
    transform: scale(1.1);
  }

  .Loginbackimg::after {
    height: 100vh;
    width: 100%;
    position: fixed;
    background-repeat: no-repeat;
    background-image: url("@/assets/img/back.jpg"); //url()括号里面是图片路径，图片即为背景图片
    background-size: cover;
    background-attachment: fixed;
    -webkit-filter: blur(5px);
    filter: blur(2px);
    // transform: scale(1.1);
    content: " ";
    display: block;
    width: 100%;
    height: 400rpx;
    // background: rgba(17, 17, 17, .2);
    z-index: 1;
  }

  .loginlocat {
    margin-top: 7%;
    background-color: rgba(32, 43, 54, 0.5);
    width: 50%;
    height: 500px;
    border-radius: 20px;
    display: flex;
    // flex-direction: column;
    justify-content: center;
    text-align: center;
    background: url("@/assets/img/back.jpg") no-repeat;
    background-position: center;
    background-size: cover;
    z-index: 1;

    .loginbox {
      // z-index: 100;
      width: 600px;
      // height: 300px;
      // background-color: rgba(32, 43, 54, 0.5);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      h1 {
        text-align: center;
        color: $colortitle;
        font-family: "楷体";
      }
      .inputbox {
        width: 400px;
      }
      .title {
        
        text-align: center;
        font-size: 65px;
        letter-spacing: 20px;
        // padding-left: 5px;
        // top: 0px;
        // text-align: center;
        bottom: 45px;
        left: 10 px;
        position: relative;
        // font-family: '楷体';
        color: yellow;
        -webkit-box-reflect: below 1px -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(0.1, transparent), to(rgba(3, 3, 3, 0.2)));
        // font-size:80px; /*设置字体大小*/
        font-weight: 800; /*设置字体粗细*/
        text-shadow: 1px 0px #ff0000, 1px 2px #ff0000, 3px 1px #ff0000,
          2px 3px #ff0000, 4px 2px #ff3700, 4px 4px #ff0000, 5px 3px #ff0000,
          5px 5px #ff0000, 7px 4px #990000;
      }
      .title1{
        letter-spacing: 10px;
        margin-bottom: 20px;
      }
      .inputtext {
        height: 50px;
        font-size: 15px;
        font-family: "楷体";
      }
      .supplement {
        // width: 100px;
        height: 50px;
        cursor: pointer;
        background-color: aliceblue;
      }

      .Captchabox {
        width: 100%;
        display: flex;
        flex-direction: row;
        float: right;
        .inputCaptchatext {
          font-size: 15px;
          //   width: 50%;
        }
      }

      .btnbox {
        display: flex;
        flex-direction: row;
        justify-content: center;
      }
    }
  }
}
</style>
